<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<style>
    [v-clock]{
        display: none;
    }
    .active{
        width:100px;
        height:100px;
        background-color: blueviolet;
    }
</style>
<body>
    <div id="app" v-clock>
        <!-- 插值表达式 -->
        <h2>{{msg}}</h2>
        <!-- 把代码显示在页面上 -->
        <h2 v-pre>{{mag}}</h2>
        <!-- 只渲染一次不会再变化 -->
        <div v-once>{{msg}}</div>
        <!-- 相当于js的innerHTML -->
        <div v-html='img'></div>
        <!-- 相当于innerText -->
        <div v-text></div>
        <!-- v-bind缩写:":" -->
        <!-- 动态处理路径 -->
        <img v-bind:src="imgUrl" alt="">
        <!-- 动态绑定class -->
        <div v-bind:class="{active:isActive,show:isShow}"></div>
        <!-- 动态绑定style -->
        <h2 :style="{color:h2color}">你好</h2>
        <h2 :style='getStyle()'>你好</h2>
        <!-- 计算属性 -->
        <h2>我是{{name}}我是{{sex}}</h2>
        <h2>{{userInfo}}</h2>
        <!-- 复杂操作 -->
        <h2>总成绩：{{totalPoint}}</h2>
        <!-- 事件监听 -->
        <h2>{{count}}</h2>
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
        <!-- 判断 -->
        <h2 v-if="msg" >h2</h2>
        <h2 @click="hClick">h2</h2>
        <h2 v-if="score >= 90">优秀</h2>
        <h2 v-else-if="score >= 80">良好</h2>
        <h2 v-else-if="score >= 60">合格</h2>
        <h2 v-else>不合格</h2>
        <!-- 循环遍历 -->
        <ul>
            <li v-for="(item, key) in zs">{{ key + '-' + item }}</li>
        </ul>
        <ul>
            <!-- v-for 格式 item in arr-->
            <li v-for="item in arr">{{ item }}</li>

            <!-- v-for 格式 (item, index) in arr -->
            <li v-for="(item, index) in arr">{{ index+1 + '-' + item }}</li>
        </ul>
        <!-- v-model -->
        <!-- v-model 相当于 input中 :value和@input -->
        <!-- <input type="text" :value="msg" @input="valChange"> -->
        <input type="text" v-model="msg">
        <h2>{{ msg }}</h2>>
        <!-- 单个复选框 -->
        <label for="agree">
            <input type="checkbox" id="agree" v-model="isAgree">同意协议
        </label>
        <h2>{{ isAgree }}</h2>

        <!-- 多个复选框 -->
        <input type="checkbox" value="香蕉" v-model="fruits">香蕉
        <input type="checkbox" value="苹果" v-model="fruits">苹果
        <input type="checkbox" value="葡萄" v-model="fruits">葡萄
        <input type="checkbox" value="梨" v-model="fruits">梨
        <h2>{{ fruits }}</h2>
         <!-- <label for="male">
            <input type="radio" name="sex" id="male" value="男">男
        </label>
        <label for="female">
            <input type="radio" name="sex" id="male" value="女">女
        </label> -->
        <label for="male">
            <input type="radio" id="male" value="男" v-model="sex">男
        </label>
        <label for="female">
            <input type="radio" id="male" value="女" v-model="sex">女
        </label>
        <h2>{{ sex }}</h2>
        <!-- 单选 -->
        <select name="" id="" v-model="mySelect">
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="葡萄">葡萄</option>
        </select>
        <h2>{{ mySelect }}</h2>

        <!-- 多选 -->
        <select name="" id="" v-model="mySelects" multiple>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="葡萄">葡萄</option>
        </select>
        <h2>{{ mySelects }}</h2>
        <!-- 1.lazy 修饰符 让数据在失去焦点或者回车时候才会更新 -->
        <!-- <input type="text" v-model.lazy="msg"> -->

        <!-- 2.number 修饰符 可以让我们输入框的内容自动转为数字 -->
        <input type="text" v-model.number="num">
        <h2>{{ typeof num }}</h2>
        <!-- 3.trim 修饰符  -->
        <input type="text" v-model.trim="trimTemp">
        <h2>{{ '|' + trimTemp + '|' }}</h2>
        <!-- <h2>{{ msg }}</h2> -->
        <!-- v-show -->
        <!-- 开发中  比较频繁切换标签显示和隐藏 v-show -->
        <!-- 如果只要切换一次  v-if -->
        <h2 v-show="msg">h2</h2>
        <h2 @click="hClick">h2</h2>
    </div>
    <script>
        setTimeout(()=>{
            const app =new Vue({
            el:'#app',
            data:{
                img:'requsets_get.jpg',
                msg:"你好",
                imgUrl:'requsets_get.jpg',
                active:'active',
                isActive:false,
                isShow:true,
                h2color:'red',
                name:'inory',
                sex:'woman',
                users:[
                    {id:1,name:'tom',point:80},
                    {id:2,name:'jerry',point:87},
                ],
                count:0,
                score: 70,
                msg: false,
                zs: {
                name: '张三',
                age: 20,
                sex: '男'
                },
                arr: ['a', 'b', 'c', 'd'],
                isAgree: true,
                fruits: [],
                sex: '男',
                mySelect: '苹果',
                mySelects: [],
                msg: '1111111',
                num: 0,
                trimTemp: '  11111   '
            },
            computed:{
                userInfo:function(){
                    return '我叫'+this.name+'我是'+this.sex
                },
                totalPoint:function(){
                    let total=0
                    for(let i=0;i<this.users.length;i++){
                        total+=this.users[i].point
                    }
                    return total
                }
            },
            methods:{
                getStyle(){
                    return {color:this.h2color}
                },
                add:function(){
                    this.count+=1
                },
                sub:function(){
                    this.count-=1
                },
                valChange: function(event) {
                    this.msg = event.target.value;
                },
                hClick() {
                    this.msg = !this.msg
                }
            }
            })
        },1000)
        
    </script>
</body>
</html>